<template>
  <div>
    <el-tabs  v-model="activeTab" type="card" @tab-change="changeTabs">
      <el-tab-pane label="常规" name="design" >
        <el-form :model="form" label-width="80">
          <el-form-item label="数据库名">
            <el-input v-model="form.databaseName" :disabled="isEdit" />
          </el-form-item>
          <el-form-item label="编码格式">
            <el-select   v-model="form.charSetName" clearable  filterable @change="getCollationNameOptions"  placement="bottom" >
              <el-option  v-for="item in charSetNameOptions"
                          :key="item.character_set_name"
                          :label="item.character_set_name"
                          :value="item.character_set_name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-select    v-model="form.collationName"  clearable  filterable placement="bottom"  >
              <el-option  v-for="item in collationNameOptions"
                          :key="item.collation_name"
                          :label="item.collation_name"
                          :value="item.collation_name"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="SQL预览" name="preview">
        <div style="font-size: 12px;text-align: left;width: 97%;height: 200px;padding: 5px 5px 0 0;margin-bottom: 10px; border: 1px solid #CDD0D6;border-radius: 2px;">
          {{ previewSql}}
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="bottom-button-box">
      <div class="operate-button">
        <el-button type="primary" plain @click="closeView">取消</el-button>
        <el-button type="primary" @click="saveMysqlDatabase">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="MysqlDatabaseMate">
import {toLowerCaseKey} from "@/utils/utils";

const {proxy} = getCurrentInstance();
const props=defineProps({
  mysqlConnect:{
    type:Object,
    default:null
  },databaseMeta:{
    type:Object,
    default:null,
  }
})
const data=reactive({
  activeTab:'design',
  form:{databaseName:null},
  charSetNameOptions:[],
  collationNameOptions:[],
  previewSql:'',
  isEdit:false
})
const {activeTab,form,charSetNameOptions,collationNameOptions,previewSql,isEdit}=toRefs(data)
function getCharSetNameOptions(){
  charSetNameOptions.value=[]
  proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.charSetNameOptions,props.mysqlConnect).then(res=>{
    if(res.code===200){
      res.data.dataList.forEach(row=>{
        charSetNameOptions.value.push(toLowerCaseKey(row))
      })
    }
  })
}
function getCollationNameOptions(){
  form.value.collationName=null
  collationNameOptions.value=[]
  proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.collationNameOptions,props.mysqlConnect,{charSetName:form.value.charSetName}).then(res=>{
    if(res.code===200){
      res.data.dataList.forEach(row=>{
        collationNameOptions.value.push(toLowerCaseKey(row))
      })
    }
  })
}

function closeView() {
  proxy.$emit('closeMysqlView', false)
}

function saveMysqlDatabase(){
  if(!form.value.databaseName||form.value.databaseName.trim().length<1){
    closeView()
  }
  let channel
  if(isEdit.value){
    channel=proxy.$ipcRouters.mysqlMng.alterDatabase
  }else {
    channel=proxy.$ipcRouters.mysqlMng.createDatabase
  }
  proxy.$userIpc.invoke(channel,props.mysqlConnect,form.value).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess("保存数据库成功！")
        closeView()
      }else {
        proxy.$modal.alertError(res.message)
      }
    })
}

function changeTabs(){
  previewSql.value=''
  if(activeTab.value==='preview'){
    if(!isEdit.value){
      createSqlPreview()
    }else {
      alterSqlPreview()
    }
  }
}


function createSqlPreview(){
  sqlPreview('CREATE')
}

function alterSqlPreview(){
  sqlPreview('ALTER')
}

function sqlPreview(keyName) {
  if(!form.value.databaseName&&!form.value.charSetName&&!form.value.collationName){
    previewSql.value=''
  }else {
    let script=`${keyName} DATABASE \`${form.value.databaseName?form.value.databaseName:''}\``
    if(form.value.charSetName){
      script=`${script} CHARACTER SET '${form.value.charSetName}'`
    }
    if(form.value.collationName){
      script=`${script}  COLLATE '${form.value.collationName}' `
    }
    previewSql.value=`${script} ;`
  }

}

function initForm(){
  if(props.databaseMeta){
    isEdit.value=true
    form.value.databaseName=props.databaseMeta.schema_name
    form.value.charSetName=props.databaseMeta.default_character_set_name
    getCollationNameOptions()
    form.value.collationName=props.databaseMeta.default_collation_name

  }
}
initForm()
getCharSetNameOptions()
</script>

<style scoped lang="scss">
.el-dialog__header{
  padding-bottom: 0px;
}
</style>
